<template>
  <div id="input_list">
    <div class="content">
      <div class="inputBox">
        <ul>
          <li class="selectBox" v-if="email_register">
            <van-radio-group v-model="radio" direction="horizontal" icon-size="15px">
              <van-radio name="0" :checked-color="subjectColor">手机号</van-radio>
              <van-radio name="1" :checked-color="subjectColor">邮箱</van-radio>
            </van-radio-group>
          </li>
          <li class="country" v-if="inputShowList.countryCodeShow && !inputShowList.logPlugIn && radio == '0'">
            <van-field v-model.trim="form.country" type="number" clearable placeholder="86"
              maxlength="5"
              :rules="[{ required: true, message: '请输入国际区号' }]" :mode="false" required>
              <template #label>
                <div style="width: 6rem; margin-left: 0.75rem; font-weight: 500; font-weight: 550;" >
                  国家区号
                </div>
              </template>
            </van-field>
            <div></div>
          </li>
          <li v-if="!inputShowList.logPlugIn">
            <van-field v-model.trim="form.mobile" :type="radio == '1'?'text':'number'" clearable :placeholder="radio == '1'?'请输入您的邮箱':'请输入您的手机号'"
              :rules="[{ required: true, message: radio == '1'?'请输入您的邮箱':'请输入您的手机号' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <i v-if="radio == '1'" class="iconfont icon-youxiang_1" style="width: 0.82rem; font-size: 0.8rem;margin-top:0.15rem;" />
                  <img v-else src="../assets/images/loginPhone.png" style="width: 0.719rem; height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
            <div class="label" v-if="type == 'register'">{{radio == '1'?'注册后，该邮箱将作为登录凭证':'注册后，该手机号将作为登录凭证'}}</div>
            <div></div>
          </li>
          <!-- 邮箱验证码-->
          <li v-if="!inputShowList.logPlugIn && radio == '1'">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入邮箱验证码"
              :rules="[{ required: true, message: '请输入邮箱验证码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/auth_code.png" style="width: 0.875rem; height: 1rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <div style="font-size: 12px;" :style="'color:'+'var(--themeBaseColor)'" @click="verificationEmail">{{btnText}}</div>
              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 账号-->
          <li v-if="inputShowList.logPlugIn && radio == '0'">
            <van-field v-model.trim="form.account" type="text" clearable placeholder="请输入账号"
              :rules="[{ required: true, message: '请输入账号' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/login_user.png" style="width: 1rem; height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 0.5rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!-- -->
          <!-- 图形验证码-->
          <li v-if="inputShowList.captchaShow && !inputShowList.logPlugIn && radio == '0'">
            <van-field v-model.trim="form.captcha" clearable type="text" placeholder="请输入图形信息"
              :rules="[{ required: true, message: '请输入图形信息' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/ht_bg_bgimg.png" style="width: 0.95rem; height: 0.875rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px; display: flex; align-items: center;">
                <img :src="imgcode" style="width: 3.594rem; height: 1.5rem;" @click="getimgdata()" />
              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 短信验证码-->
          <li v-if="!inputShowList.logPlugIn && radio == '0'" style="position: relative">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入短信验证码"
              :rules="[{ required: true, message: '请输入短信验证码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/auth_code.png" style="width: 0.875rem; height: 1rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;width: 150px">

              </template>
            </van-field>
            <div style="font-size: 12px;position: absolute;
    right: 0;
    z-index: 999999;
    top: 20px" :style="'color:'+'var(--themeBaseColor)'" @click="verificationCode">{{btnText}}</div>
          </li>
          <!-- -->
          <!-- 密码-->
          <li v-if="inputShowList.passwordInputShow">
            <van-field v-model.trim="form.password" clearable :type="passwordShow?'text':'password'" placeholder="请输入密码"
              :rules="[{ required: true, message: '请输入密码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <div style="width: 1.188rem;">
                    <img
                      :src="passwordShow?require('@/assets/images/view_password.png'):require('@/assets/images/no_view_password.png')"
                      :style="passwordShow?'width: 0.95rem;height: 0.7rem;':'width: 0.95rem;height: 0.4rem;'"
                      @click="viewPasswordSwitching"/>
                  </div>
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!-- -->
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    Toast
  } from 'vant';
  export default {
    props: ["type", 'inputShowList','email_register'],
    data() {
      return {
        form: {
          mobile: "",
          password: "",
          captcha: "",
          code: "",
          confirm_password: "",
          country: "86",
          account:""
        },
        toastLogin: '',
        btnText: '获取验证码',
        passwordShow: false,
        passwordConfirmShow: false,
        imgcode: "", //验证码图片地址
        subjectColor: '', //主题色
        radio:'0'
      };
    },
    mounted() {
      console.log(this.email_register)
      this.subjectColor = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color
      if(!this.inputShowList.img) {
        this.getimgdata();
      } else {
        this.imgcode = this.inputShowList.img;
      }
      if(this.email_register){
        this.radio = String(this.email_register);
      }
    },
    methods: {
      // 发送邮箱验证码
      verificationEmail(){
        if(this.btnTag) return
        if (this.fun.isTextEmpty(this.form.mobile)) {
          Toast("请填写邮箱");
          return;
        }
        if (this.fun.isEmail(this.form.mobile)) {
          Toast("请填写正确的邮箱");
          return;
        }
        if (this.fun.isTextEmpty(this.form.captcha) && this.inputShowList.captchaShow) {
          Toast("请填写图形验证码");
          return;
        }
        this.toastLogin = Toast({
          duration: -1, // 持续展示 toast
          message: '发送中...'
        });
        //发送获取验证码的请求
        $http
          .post("member.register.sendMail", {
            mail: this.form.mobile,
          })
          .then(
            response => {
              this.toastLogin.clear();
              if (response.result === 1) {
                this.sendCodeAnimation();
              } else {
                //刷新图形验证码
                Toast(response.msg);
                this.form.captcha = "";
                this.getimgdata();
              }
            },
            response => {
              console.log(response.msg);
            }
          );
      },
      //发送验证码
      verificationCode() {
        if(this.btnTag) return
        let that = this;
        if (this.fun.isTextEmpty(this.form.country) && this.inputShowList.countryCodeShow) {
          Toast("请输入国际区号");
          return;
        }
        if (this.fun.isTextEmpty(this.form.mobile)) {
          Toast("请填写手机号");
          return;
        }
        if (this.fun.isMoblie(this.form.mobile)) {
          Toast("请填写正确的手机号");
          return;
        }
        if (this.fun.isTextEmpty(this.form.captcha) && this.inputShowList.captchaShow) {
          Toast("请填写图形验证码");
          return;
        }

        this.toastLogin = Toast({
          duration: -1, // 持续展示 toast
          message: '发送中...'
        });
        //发送获取验证码的请求
        $http
          .get("member.register.sendCodeV2", {
            mobile: this.form.mobile,
            captcha: this.form.captcha,
            state:this.form.country,
            code: this.form.code,
            reset: "1",
            sms_type: 1
          })
          .then(
            response => {
              this.toastLogin.clear();
              if (response.result === 1) {
                that.sendCodeAnimation();
              } else {
                //刷新图形验证码
                Toast(response.msg);
                this.form.captcha = "";
                this.getimgdata();
              }
            },
            response => {
              console.log(response.msg);
            }
          );
      },
      //发送验证码 倒计时
      sendCodeAnimation() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          Toast.success('验证码已发送');
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
              this.btnText = this.count + "s后重新获取";
              this.btnTag = true;
            } else {
              this.btnTag = false;
              this.btnText = "获取验证码";
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      //获取图片验证码
      getimgdata() {
        $http
          .get("home-page.getCaptcha")
          .then(res => {
            if (res.data.captcha) {
              this.imgcode = res.data.captcha.img;
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      viewPasswordSwitching() { //密码显示隐藏切换
        this.passwordShow = !this.passwordShow
      },

      viewConfirm_PasswordSwitching() { //密码显示隐藏切换
        this.passwordConfirmShow = !this.passwordConfirmShow
      },
    },
  };
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  #input_list {
    .content {
      background-color: white;
      border-radius: 0.313rem;
      padding: 0.2rem;
      margin: 0.625rem;
      position: relative;
    }

    .inputBox {
      position: relative;
      padding-right: 0.9rem;
      margin-top: -0.2rem;
      .selectBox{
        margin-left: 0.8rem;
        margin-top: 1rem;
      }
      .country {
        ::v-deep .van-field__control {
          margin-left: 2rem;
        }

        ::v-deep .van-cell--required::before {
          left: 9px;
        }
      }

      .slotIphone {
        display: flex;
        color: #00001c;
        font-size: 15px;

        .icon {
          font-size: 21px;
          margin-left: 0.3rem;

        }
      }

      .label {
        color: #4e4e4e;
        font-size: 12px;
        margin-left: 0.8rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }

      .slotCode {
        color: #00001c;
        display: flex;
        align-items: center;
        width: 1.063rem;
        margin-top: -0.2rem;
        margin-left: 0.7rem;

        .icon {
          font-size: 21px;
          margin-left: 0.6rem;
          margin-top: 0.2rem;
        }
      }

      .passwordLogin {
        color: #f14e4e;
        letter-spacing: 0.6px;
        font-size: 12px;
        font-weight: 550;
        margin-top: 17px;
        margin-left: 16px;
      }

      ::v-deep ul li .van-cell {
        align-items: center;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-left: 0.3rem;
      }

      ::v-deep ul li .van-field__label {
        width: 3.2rem;
      }

      ::v-deep .van-field__label {
        color: #00001c;
        font-weight: 550;
        letter-spacing: 0.5px;
        width: 3.7rem;
      }
    }
  }
</style>
